<div class="product_images_carousel">
    <?php 
        echo $this->headScript()->prependFile($this->basePath() . '/js/jPages.min.js', 'text/javascript');
        echo $this->headLink()->appendStylesheet($this->basePath() . '/css/jPages.css');
    ?>
	<div class="image_carousel_button previous"></div>
    <div id="imagesContainer" class="images_container">
	   <?php 
	       foreach ($this->carousel_images as $carousel_image)
              echo sprintf('<img class="carousel_image" src="%s" />', $carousel_image);    
	    ?>
    </div>
	<div class="image_carousel_button next"></div>
    <div class="holder"></div>
    <?php 
        echo sprintf('<img class="main_image" src="%s" />', $this->main_image);
    ?>
</div>

<script type="text/javascript">
    $("div.holder").jPages({
        containerID : "imagesContainer",
        perPage      : 1,
        previous    : ".product_images_carousel .previous",
        next        : ".product_images_carousel .next",
    });
</script>